Conditions | 12 |
Total Lines | 68 |
Code Lines | 50 |
Lines | 0 |
Ratio | 0 % |
Changes | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like reactrouter.js ➔ instrumentReactRouter often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
1 | Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); |
||
76 | |||
77 | function instrumentReactRouter( |
||
78 | client, |
||
79 | instrumentPageLoad, |
||
80 | instrumentNavigation, |
||
81 | history, |
||
82 | instrumentationName, |
||
83 | allRoutes = [], |
||
84 | matchPath, |
||
85 | ) { |
||
86 | function getInitPathName() { |
||
87 | if (history.location) { |
||
88 | return history.location.pathname; |
||
89 | } |
||
90 | |||
91 | if (browser.WINDOW.location) { |
||
92 | return browser.WINDOW.location.pathname; |
||
93 | } |
||
94 | |||
95 | return undefined; |
||
96 | } |
||
97 | |||
98 | /** |
||
99 | * Normalizes a transaction name. Returns the new name as well as the |
||
100 | * source of the transaction. |
||
101 | * |
||
102 | * @param pathname The initial pathname we normalize |
||
103 | */ |
||
104 | function normalizeTransactionName(pathname) { |
||
105 | if (allRoutes.length === 0 || !matchPath) { |
||
106 | return [pathname, 'url']; |
||
107 | } |
||
108 | |||
109 | const branches = matchRoutes(allRoutes, pathname, matchPath); |
||
110 | for (const branch of branches) { |
||
111 | if (branch.match.isExact) { |
||
112 | return [branch.match.path, 'route']; |
||
113 | } |
||
114 | } |
||
115 | |||
116 | return [pathname, 'url']; |
||
117 | } |
||
118 | |||
119 | if (instrumentPageLoad) { |
||
120 | const initPathName = getInitPathName(); |
||
121 | if (initPathName) { |
||
122 | const [name, source] = normalizeTransactionName(initPathName); |
||
123 | browser.startBrowserTracingPageLoadSpan(client, { |
||
124 | name, |
||
125 | attributes: { |
||
126 | [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload', |
||
127 | [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`, |
||
128 | [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source, |
||
129 | }, |
||
130 | }); |
||
131 | } |
||
132 | } |
||
133 | |||
134 | if (instrumentNavigation && history.listen) { |
||
135 | history.listen((location, action) => { |
||
136 | if (action && (action === 'PUSH' || action === 'POP')) { |
||
137 | const [name, source] = normalizeTransactionName(location.pathname); |
||
138 | browser.startBrowserTracingNavigationSpan(client, { |
||
139 | name, |
||
140 | attributes: { |
||
141 | [core.SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation', |
||
142 | [core.SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`, |
||
143 | [core.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source, |
||
144 | }, |
||
237 |